<template>
	<view class="carListBox">
		<view class="header-search">
			<!-- 左边icon -->
			<view class="address" @click="handleToggleCity">
				<text class="eclips u-line-1">{{ params.city }}</text>
			</view>
			<!-- 右边搜索 -->
			<view class="search">
				<view class="search-icon"><image src="../../static/assets/index/icon-serch.png"></image></view>
				<input @confirm="sure" confirm-type="search" v-model="params.search" type="text" placeholder="输入车辆的名称或品牌" />
			</view>
			<view class="choose" @click="choose">
				筛选
				<text class="iconfontPT icondingqitijian"></text>
			</view>
		</view>
		<!-- <multiple-search></multiple-search> -->

		<view class="itemBox">
			<view @click="next(item)" class="item" v-for="(item, index) in carList" :key="index">
				<view class="item__image-wrap">
					<image class="item__img" :src="`${item.image}-t.m75xx`" mode="aspectFill"></image>
					<view class="car-tags">
						<view class="car-tags__tag car-tags__tag--fast" v-if="item.is_fast">急</view>
						<view class="car-tags__tag car-tags__tag--drop" v-if="item.is_drop">降</view>
						<view class="car-tags__tag car-tags__tag--new" v-if="item.is_fast && item.is_drop ? false: item.is_new">新</view>
					</view>
				</view>
				<view class="recommendCar">
					<view class="name u-line-2">{{ item.carname }}</view>
					<view class="item__info">
						<text class="item__info__label item__info__label--style2">{{ item.card_time }}</text>
						<text class="item__info__label">{{ item.mileage }}</text>
						<text class="item__info__label item__info__label--style3">{{ item.city }}</text>
					</view>
					<view class="price">
						<text class="price--full">
							{{ item.price }}万
							<text class="price--down-payment">首付{{ item.sf }}万</text>
						</text>
					</view>
				</view>

				<!-- <image v-if="item.is_fast" class="item__urgent" src="../../static/images/urgent.png" mode="aspectFill" lazy-load="true"></image> -->
			</view>
			<no-data v-if="carList.length === 0" texts="此区域暂无二手车" />
			<view class="no-more" v-if="!loadMore">没有更多了~</view>
		</view>

		<view class="screenBox" v-if="showChoose">
			<view class="screenTop">
				<text class="iconfontPT iconshanchu1" @click="close"></text>
				<text>筛选</text>
			</view>
			<view class="screenContent">
				<view class="item">
					<view class="label">价格区间（万元）</view>
					<view class="value">
						<input type="number" v-model="params.min_price" placeholder="最低价" />
						<view class="line"></view>
						<input type="number" v-model="params.max_price" placeholder="最高价" />
					</view>
				</view>
				<!-- <view class="item">
					<view class="label">
						车龄
					</view>
					<view class="value">
						<input type="text" v-model="params.min_year" placeholder="最低年限" />
						<view class="line"></view>
						<input type="text" v-model="params.max_year" placeholder="最高年限" />
					</view>
				</view> -->
				<view class="item">
					<view class="label">里程（公里）</view>
					<view class="value">
						<input type="number" v-model="params.min_mil" placeholder="最短里程" />
						<view class="line"></view>
						<input type="number" v-model="params.max_mil" placeholder="最长里程" />
					</view>
				</view>
				<view class="item">
					<view class="label">车龄</view>
					<view class="value">
						<input type="number" min="0" v-model="params.min_year" placeholder="最低年限" />
						<view class="line"></view>
						<input type="number" max="20" v-model="params.max_year" placeholder="最高年限" />
					</view>
				</view>
				<view class="item">
					<view class="label">类别</view>
					<view class="value">
						<view :class="activeLev1 === index ? 'lev active' : 'lev'" v-for="(item, index) in levList1" :key="index" @click="chooseLev1(item, index)">{{ item }}</view>
					</view>
				</view>
				<!-- <view class="item">
					<view class="label">
						月供（元）
					</view>
					<view class="value">
						<input type="text" value="" placeholder="最低" />
						<view class="line"></view>
						<input type="text" value="" placeholder="最高 " />
					</view>
				</view> -->
				<!-- 	<view class="item">
					<view class="label">
						级别
					</view>
					<view class="value">
						<view :class="activeLev2 == index?'lev active':'lev'" v-for="(item ,index) in levList2" :key='index' @click="chooseLev2(item,index)">
							{{item}}
						</view>
					</view>
				</view> -->
				<!-- <view class="item">
					<view class="label">
						变速箱
					</view>
					<view class="value">
						<view :class="activeLev3 == index?'lev active':'lev'" v-for="(item ,index) in levList3" :key='index' @click="chooseLev3(item,index)">
							{{item}}
						</view>
					</view>
				</view> -->
				<view class="item">
					<view class="label">排放标准</view>
					<view class="value">
						<view :class="activeLev4 === index ? 'lev active' : 'lev'" v-for="(item, index) in levList4" :key="index" @click="chooseLev4(item, index)">{{ item }}</view>
					</view>
				</view>
			</view>
			<view class="tool-btns">
				<view class="reset-btn" @click="resetParams">重置</view>
				<view class="sure-btn" @click="sure">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
import MultipleSearch from '@/pages/components/public/multiple-search.vue'
import { getcarList } from '../../apis/used-car/api.js';
export default {
	data() {
		return {
			showChoose: false,
			levList1: ['微型车', '小型车', '紧凑型', '中型车', '中大型', '豪华车', 'SUV', 'MPV', '跑车', '面包车', '皮卡'],
			activeLev1: '',
			levList2: ['1.0L以下', '1.0-1.6L', '1.6-2.0L', '2.0-3.0L', '3.0L以上'],
			activeLev2: '',
			levList3: ['手动', '自动', '手自一体', '无级变速', '双离合'],
			activeLev3: '',
			levList4: ['国Ⅵ', '国Ⅴ', '国Ⅳ', '国Ⅲ', '国Ⅱ'],
			activeLev4: '',
			carList: [],
			params: {
				city:'全国',
				search: '',
				max_year: '',
				min_year: '',
				level: '', //级别
				envir: '', // 排放
				min_mil: '', // 最小里程
				max_mil: '' ,// 最大里程
				p:1
			},
			loadMore:true,
			sharePhone:''
		};
	},
	components:{
		MultipleSearch
	},
	onLoad(option) {
		if (option.is_fast) this.params.is_fast = option.is_fast;
		if (option.brand_id) this.params.brand_id = option.brand_id;
		if (option.min_price) this.params.min_price = option.min_price;
		if (option.max_price) this.params.max_price = option.max_price;
		if (option.max_year) this.params.max_year = option.max_year;
		if (option.min_year) this.params.min_year = option.min_year;
		if (option.search) this.params.search = option.search;
		if (option.city != undefined) this.params.city = option.city;
		let name = option.name ? option.name : '车辆列表';
		this.sharePhone = option.sharePhone
		this.getcarList();
		uni.setNavigationBarTitle({
			title: name
		});
	},
	methods: {
		resetParams() {
			this.params = {
				search: '',
				max_year: '',
				min_year: '',
				level: '', //级别
				envir: '', // 排放
				min_mil: '', // 最小里程
				max_mil: '' ,// 最大
				p:1,
			};
			this.loadMore = true
			this.activeLev1 = '';
			this.activeLev2 = '';
			this.activeLev3 = '';
			this.activeLev4 = '';
		},
		getcarList() {
			getcarList(this.params).then(res => {
				if (res.code == 1) {
					this.loadMore = !(res.data.lists.length < 15)
					this.carList = [...this.carList,...res.data.lists.map(item=>{
						return {
							...item,
							sf: Number(item.price * 0.3).toFixed(2)
						}
					})]
				}
			});
		},
		handleToggleCity() {
			uni.navigateTo({
				url: `../new-car/component/city-model/city`
			});
			uni.$once('city-change',city=>{
				this.params.city= city
				this.params.p = 1
				this.carList = []
				this.getcarList()
			})
		},
		choose() {
			this.showChoose = true;
		},
		close() {
			this.showChoose = false;
		},
		sure() {
			this.getcarList();
			this.params.p = 1
			this.carList = []
			this.loadMore = true
			this.showChoose = false;
		},
		chooseLev1(i, index) {
			this.activeLev1 = index;
			this.params.level = i;
		},
		chooseLev2(i, index) {
			this.activeLev2 = index;
			this.params.level = i;
		},
		chooseLev3(i, index) {
			this.activeLev3 = index;
			this.params.level = i;
		},
		chooseLev4(i, index) {
			this.activeLev4 = index;
			this.params.envir = i;
		},
		next(item) {
			uni.navigateTo({
				url: `/pages/used-car/infoPage?car_id=${item.id}&sharePhone=${this.sharePhone}`
			});
		}
	},
	onReachBottom(){
		if(this.loadMore){
			this.params.p ++
			this.getcarList()
		}
	}
};
</script>

<style lang="less">
.hasnocar {
	text-align: center;
	line-height: 80rpx;
}
.carListBox {
	background-color: #f8f8f8;
	min-height: 100vh;

	.header-search {
		padding: 0 30rpx;
		height: 88rpx;
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-items: center;
		z-index: 99;
		background-color: #fff;

		.address {
			margin: 0;
			width: 95rpx;
			font-size: 28rpx;

			text {
				line-height: 56rpx;
			}
		}

		.search {
			flex: 1;
			height: 54rpx;
			background: rgb(248, 248, 248);
			font-size: 32rpx;
			display: flex;
			border-radius: 40rpx;
			border: 1rpx solid #eee;
			align-items: center;
			color: #afafaf;

			.search-icon {
				display: block;
				width: 56rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin: 18rpx 16rpx 16rpx 25rpx;
				}
			}

			input {
				display: inline-block;
				height: 54rpx;
				width: 90%;
				padding-left: 16rpx;
				background: transparent;
				outline: none;
				vertical-align: middle;
				font-size: 24rpx;
			}
		}

		.choose {
			width: 130rpx;
			font-size: 26rpx;
			padding-left: 20rpx;
			line-height: 54rpx;
			color: #7f7f7f;
			text-align: right;

			text {
				padding-left: 20rpx;
			}
		}
	}

	.itemBox {
		padding: 0 30rpx;
		// padding-bottom: 206rpx;
		margin-top: 20rpx;
		.item {
			position: relative;
			height: 175rpx;
			padding: 20rpx;
			box-shadow: 1px 7px 6px 0px rgba(0, 0, 0, 0.01);
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}
			&__image-wrap{
				width: 228rpx;
				height: 175rpx;
				float: left;
				border-radius: 10rpx;
				position: relative;
				overflow: hidden;
			}
			&__img {
				width: 100%;
				height: 100%;
			}


			&__info {
				margin-top: 10rpx;

				&__label {
					border-radius: 8rpx;
					background-color: rgba(68, 169, 255, 0.6);
					margin: 0 10rpx 0 0;
					padding: 4rpx 10rpx;
					color: #fff;
					font-size: 20rpx;

					&--style2 {
						background-color: rgba(255, 129, 55, 0.6);
					}

					&--style3 {
						background-color: rgba(238, 10, 24, 0.6);
					}
				}
			}

			.recommendCar {
				float: left;
				width: calc(~'100% - 248rpx');
				padding-left: 20rpx;
				position: relative;
				height: 100%;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.price {
					font-size: 26rpx;
					margin-top: 18rpx;

					&--full {
						color: #e31805;
						font-size: 30rpx;
					}

					&--down-payment {
						color: #666;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.car-tags{
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			&__tag{
				width: 32rpx;
				height: 37rpx;
				color: #FFFFFF;
				border-radius: 5rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				margin-right: 10rpx;
				&--fast{
					background: linear-gradient(#F88133,#F63E2B);
				}
				&--drop{
					background: linear-gradient(#F76547,#F53C38);
				}
				&--new{
					background: linear-gradient(#7CF595,#52D341);
				}
			}
		}
	}

	.screenBox {
		padding: 0 29rpx;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #fff;
		z-index: 1000;
		padding-top: 90rpx;
		overflow: auto;
		.screenTop {
			position: relative;
			text-align: center;
			.iconshanchu1 {
				position: absolute;
				left: 0;
				font-size: 40rpx;
			}
		}
		.item {
			margin-top: 30rpx;
			padding: 0 10rpx;
			.label {
				font-size: 30rpx;
				color: #333;
			}
			.value {
				margin-top: 28rpx;
				&::after {
					content: '';
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}
				.line {
					width: 88rpx;
					height: 2rpx;
					float: left;
					background-color: #d9d9d9;
					margin: 0 18rpx;
					margin-top: 34rpx;
				}
				input {
					width: 270rpx;
					height: 46rpx;
					float: left;
					background-color: #f7f7f7;
					line-height: 46rpx;
					text-align: center;
					font-size: 26rpx;
					padding: 10rpx 0;
				}
				.lev {
					width: 151rpx;
					height: 51rpx;
					background-color: #f7f7f7;
					color: #7f7f7f;
					font-size: 24rpx;
					text-align: center;
					line-height: 51rpx;
					float: left;
					margin: 0 10rpx;
					margin-top: 20rpx;
					border-radius: 8rpx;
					&.active {
						background-color: #e31705;
						color: #fff;
					}
				}
			}
		}

		.tool-btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin: 30rpx 0 20rpx;

			.reset-btn,
			.sure-btn {
				border-radius: 10rpx;
				background-color: #e31705;
				text-align: center;
				color: #fff;
				padding: 20rpx 40rpx;
				flex: 1;
				margin: 0 10rpx;
			}

			.reset-btn {
				background-color: #45aaff;
			}
		}
	}
}
.no-more{
	color: #999999;
	text-align: center;
	padding: 20rpx 0;
}
</style>
